<template>
	<div v-title data-title="时政">
		<NavTop></NavTop>
		<el-main style="margin-top: 60px;">
			<el-row>
				<el-col :span="24">
					<div class="grid-content bg-purple-dark">
						<h1 class="h1-height">时政</h1>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(75,82)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(61,68)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(50,57)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>			
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(40,47)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
			</el-row>
			
			<el-row :gutter="20">
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(20,27)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(10,17)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>	
						</el-card>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(29,36)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
				
				<el-col :span="6">
					<div class="grid-content bg-purple">
						<el-card>
							<div class="news" v-for="news in newsData.slice(35,42)">
								<router-link style="color: black;" :to="{name: 'NewsDetail', params:{newsId: news.id}}">
									<h4>{{news.title}}</h4>
									<br>
								</router-link>
							</div>		
						</el-card>
					</div>
				</el-col>
			</el-row>
		</el-main>
		<Footer></Footer>
	</div>
</template>

<script>
	import NavTop from "@/components/NavTop"
	import Footer from "@/components/Footer"
	export default{
		name: 'Politics',
		components: {
			NavTop,
			Footer
		},
		data() {
			return {
				
				//新闻内容
				newsData:{
					
				},
		
			}
		
		},
		methods: {
			getNews(){
				this.$axios.get('/newsList').then(res => {
					this.newsData = res.data.data
				})
				
			},
		},
		created() {
			this.getNews()
		}
	}
</script>

<style>
</style>
